<template>
  <div class="about">
    <!-- <img class="blur" src="../assets/about/head-bg.png" alt="" /> -->
    <div class="head">
      <div class="blur"></div>
      <div class="content">
        <div class="user-img">
          <img :src="userData.headimgurl">
        </div>
        <div class="user-name">{{userData.nickname}}</div>
        <div class="user-refresh rx-cc" @click="getWxUserInfo"><img src="../assets/about/refresh.png" alt="">更新资料</div>
      </div>
    </div>

    <div class="foot">
      <div class="my-order">
        <div class="order-head dis-sp bor-b-1">
          <div class="order-head-left">我的订单</div>
          <div class="order-head-right rx-cc">
            <div @click="myOrder(0)">全部订单</div>
            <van-icon class="order-hhead-righ-icon" name="arrow" />
          </div>
        </div>
        <div class="order-li" v-for="(item,index) in orderList" :key="index" @click="onRouterPages('2','/orderList',{status:item.id})">
          <div class="order-li-icon"><img :src="item.icon" /></div>
          <div class="order-li-text">{{item.title}}</div>
        </div>
      </div>

      <!--star-->
      <div class="my-item dis-sp bor-b-1" v-for="(item,index) in menuList" :key="index" @click="onRouterPages(item.type,item.url,'')">
        <div class="img-title rx-sc">
          <div class="my-item-icon"><img :src="item.icon" /></div>
          <div class="">{{item.title}}</div>
        </div>
        <van-icon class="go-detail" name="arrow" />
      </div>
    </div>
    
    <Footer />
  </div>
</template>
<script >
import Footer from "@/layout/footer/index.vue";
import $api from "@/api/index";
export default {
  name: "About",
  components: {
    Footer
  },
  data() {
    return {
      orderList:[
        {id:1,title:'待付款',icon:require('../assets/about/order-li-icon1.png')},
        {id:2,title:'待发货',icon:require('../assets/about/order-li-icon2.png')},
        {id:3,title:'待收货',icon:require('../assets/about/order-li-icon3.png')},
        {id:4,title:'已完成',icon:require('../assets/about/order-li-icon4.png')},
        {id:5,title:'售后',icon:require('../assets/about/order-li-icon5.png')}
      ],
      menuList:[
        {type:'1',id:'1',title:'我的余额',icon:require('../assets/about/my-item-icon1.png'),url:'/balance'},
        {type:'1',id:'2',title:'报名记录',icon:require('../assets/about/my-item-icon2.png'),url:'/enrollRecord'},
        {type:'1',id:'3',title:'收货地址',icon:require('../assets/about/my-item-icon3.png'),url:'/myAddress'},
        {type:'1',id:'4',title:'免费开通直播间',icon:require('../assets/about/my-item-icon4.png'),url:'/openingLive'}
      ],
      userData:{}
    };
  },
  created(){
    this.getWxUserInfo()
  },
  methods: {
    /**
     * 公用跳转
     */
    onRouterPages(type,url,params){
      console.log(type)
      if(type == '1'){
        this.$router.push({path:url})
      }else if(params.status != 5){
        this.$router.push({path:url,query: params})
      }else{
        this.$router.push({path:'/afterSalesList'})
      }
    },
    //获取用户信息
    getWxUserInfo(){
      this.$toast.loading({
        message: "加载中...",
        duration: 500,
      });
      $api.aboutApi.wxUserInfo({}).then((res)=>{
        this.userData = res.data
      })
    },
    //我的订单
    myOrder(num){
      this.$router.push({path:'/orderList',query: {status:num}})
    }
  },
};
</script>
<style lang="scss" scoped>
  .about {
    // height: 100vh;
    background: #F2F5F4;
    .head {
      width: 100%;
        height: 217px * 2;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        overflow: hidden;
      
      
      .blur {
        top:-10%;
        left: -10%;
        background: rgba(20, 6, 6, 0.34);
        background-image: url('../assets/about/head-bg.png');
        position: absolute;
        background-position: center;
        background-size: cover;
        width: 120%;
        height: 120%;
        filter: blur(20px);
      }
      .content {
        position: relative;
        padding: 48px 0;
        background: rgba(20, 6, 6, 0.34);
        color: #fff;
        .user-img {
          width: 116px;
          height: 116px;
          text-align: center;
          margin: 0 auto;
          background: #fff;
          border-radius: 50%;
          img {
            margin-top: 2px;
            width: 112px;
            height: 112px;
            border-radius: 50%;
          }
        }
        .user-name {
          margin: 24px 0;
          font-size: 36px;
          font-weight: 500;
          text-align: center;
        }
        .user-refresh {
          width: 196px;
          height: 64px;
          line-height: 64px;
          text-align: center;
          margin: 0 auto;
          border-radius: 32px;
          font-size: 28px;
          border: 1px solid #FFFFFF;
          img {
            width: 32px;
            height: 32px;
            margin-right: 12px;
          }
        }
      }
    }
    .foot {
      position: relative;
      top: -60px;
      height: 100vh;
      .my-order {
        background: #fff;
        border-radius: 24px 24px 0px 0px;
        margin-bottom: 24px;
        .order-head{
          padding: 32px 24px 24px 24px;
          font-size: 32px;
          .order-head-left {
            font-weight: 500;
          }
          .order-head-right {
            width: 148px;
            height: 48px;
            line-height: 48px;
            font-size: 24px;
            text-align: center;
            border: 1px solid #040A23;
            .order-head-right-icon{
             
            }
          }
        }
        .order-li {
          width: 20%;
          padding: 48px 0;
          display: inline-block;
          vertical-align: middle;
          text-align: center;
          font-size: 24px;
          .order-li-icon {
            margin-bottom: 4px;
            img {
              width: 52px;
              height: 52px;
            }
          }
        }
      }
      .my-item {
        padding: 24px;
        background: #fff;
        .img-title {

          .my-item-icon {
            margin-right: 24px;
            img {
              width: 52px;
              height: 52px;
            }
          }
        }
      }
    }
    .bor-b-1{
      border-bottom: 1px solid #F5F5F5;
    }
  }
</style>
